<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文本样式</title>
		<style type="text/css">		
			.myAlign{
				text-align: center; /*设置文本水平居中*/
			}
			.myDir{
				direction: rtl; /*设置文本方向从右向左*/
				unicode-bidi: bidi-override;/*重新排序取决于 direction 属性。*/
			}		
			.myDec{
				color: red;	/*设置字体颜色*/
				text-decoration: underline; /**/
			}
			.myIndent{
				text-indent: 50px;  /*文本首行缩进50px,-50px代表向左缩进*/
			}
			.myHeight{
				line-height: 300%;	/*设置行高为300%,基于当前字体尺寸*/
			}
			.myHello{
				text-transform: uppercase; /*将文本中的英文字母小写转换为大写*/
				letter-spacing: -2px; /*缩小字符间的间距*/
			}
			.myWordSpacing{
				word-spacing: 50px; /*增加单词间的距离*/
			}
			.myShadow{
				/*四个值分别代表水平阴影位置,垂直阴影位置,模糊程度,阴影颜色*/
				text-shadow: -4px 4px 2px blue;
			}
			.myOver{
				width: 200px;
				border: 1px solid red;
				/*设置溢出处理方式为省略号，配合overflow，white-space使用*/
				text-overflow: ellipsis; 
				overflow: hidden;  /*溢出隐藏*/
				white-space: nowrap; /*不换行*/
			}
		</style>
	</head>
	<body>		
		<p class="myAlign">将这段文字的水平对齐方式设置为居中对齐</p>
		<p class="myDir">将文字方向设置为从右往左</p>
		<p class="myDec">将文本字体设置为红色并设置蓝色波浪下划线</p>
		<p class="myIndent">将文本首行缩进50px</p>
		<p class="myHeight">将这段文字的行高设置成更大的行高</p>
		<p class="myHello">将“Hello world”小写转换为大写，并且减小文字间距</p>		
		<p class="myWordSpacing">Increase word spacing</p>
		<p class="myShadow">为这段文字设置阴影</p>
		<p class="myOver">设置段落的宽为200px，不换行，溢出的文本用省略号代替</p>
	</body>
</html>
